<!DOCTYPE html>
<html class="x-admin-sm">

<head>
    <meta charset="UTF-8">
    <title>欢迎页面-X-admin2.2</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport"
        content="width=device-width,user-scalable=yes, minimum-scale=0.4, initial-scale=0.8,target-densitydpi=low-dpi" />
    <link rel="stylesheet" href="../css/admin/font.css">
    <link rel="stylesheet" href="../css/admin/xadmin.css">
    <script type="text/javascript" src="../js/layui/layui.js" charset="utf-8"></script>
    <script type="text/javascript" src="../js/xadmin.js"></script>
    <script type="text/javascript" src="../js/checkAdmin.js"></script>
</head>

<body>
    
    <div class="layui-fluid">
        <div class="layui-row">
            <form class="layui-form">

                <div class="layui-form-item">
                    <label for="bTitle" class="layui-form-label">
                        <span class="x-red">*</span>书名</label>
                    <div class="layui-input-inline">
                        <input type="text" id="bTitle" name="bTitle" lay-verify="required" autocomplete="off"
                            class="layui-input">
                    </div>
                </div>
                <div class="layui-form-item">
                    <label for="author" class="layui-form-label">
                        <span class="x-red">*</span>作者</label>
                    <div class="layui-input-inline">
                        <input type="text" id="author" name="author" lay-verify="required" autocomplete="off"
                            class="layui-input">
                    </div>
                </div>

                <div class="layui-form-item">
                    <label class="layui-form-label">
                        <span class="x-red">*</span>搜索类型</label>
                    <div class="layui-input-inline">
                        <select name="cate" id="cate" lay-filter="category" lay-search="">
                        </select>
                    </div>
                </div>

                <div class="layui-upload" style="padding-left: 110px;">
                    <button type="button" class="layui-btn layui-btn-danger" id="test1">
                        <i class="layui-icon"></i>上传图片</button>
                    <div class="layui-inline layui-word-aux">
                        限制 300KB </div>
                    <div class="layui-upload-list" style="max-width: 60%;">
                        <img class="layui-upload-img" id="demo1">
                        <p id="demoText"></p>
                        <input type="text" id="bPicture" value="" name="bPicture" style="display:none" />
                    </div>
                </div>

                <div class="layui-form-item layui-form-text">
                    <label class="layui-form-label">简介</label>
                    <div class="layui-input-block">
                        <textarea placeholder="请输入内容" id="introduce" name="introduce" lay-verify="required"
                            class="layui-textarea">
                      </textarea></div>
                </div>

                <div class="layui-form-item">
                    <label for="L_repass" class="layui-form-label"></label>
                    <div class="layui-btn" lay-filter="add" id="addBtn" lay-submit="">添加</div>
                </div>
            </form>
        </div>
    </div>
    <script>
        layui.use(['laydate', 'laypage', 'layer', 'table', 'carousel', 'upload', 'element', 'slider'], function () {
            var laydate = layui.laydate //日期
                , laypage = layui.laypage //分页
                , layer = layui.layer //弹层
                , table = layui.table //表格
                , carousel = layui.carousel //轮播
                , upload = layui.upload //上传
                , element = layui.element //元素操作
                , slider = layui.slider //滑块
                , $ = layui.jquery
                , form = layui.form // 表单


            // 禁用按钮
            // $('#addBtn').addClass("layui-btn-disabled").attr("disabled", true);

            var checkerbTitle = 0;
            // 保证书名的唯一性
            $('#bTitle').blur(function () {
                $.ajax({
                    url: "http://127.0.0.1:8001/after/book/showByBTitle"
                    , type: "get"
                    , data: {
                        "bTitle": $('#bTitle').val()
                    }
                    , success: function (datas) {
                        console.log(datas)
                        if (datas.count != 0) {
                            layer.msg('书名已存在，请更换', { time: 2000 });
                            // $('#addBtn').addClass("layui-btn-disabled").attr("disabled", true);
                            checkerbTitle = 0;
                            return false;
                        }
                        checkerbTitle = 1;
                    }
                });
            })

            // 图片上传
            upload.render({
                elem: '#test1'
                , url: 'http://127.0.0.1:8001/common/uploadPic' //改成您自己的上传接口
                , data: {
                    type_img: 1
                }
                , size: 200
                , before: function (obj) {
                    //预读本地文件示例，不支持ie8
                    obj.preview(function (index, file, result) {
                        $('#demo1').attr('src', result); //图片链接（base64）
                    });
                }
                , done: function (res) {
                    if (res.code == 200) {
                        // 将地址赋给input框，方便获取
                        $('#bPicture').val(res.data);
                        return layer.msg(res.msg);
                    }
                    layer.msg('上传失败');
                    console.log(res)
                }
            });

            // 获取下拉框数据
            layer.ready(function () {
                $.ajax({
                    url: "http://127.0.0.1:8001/after/type/showAll"
                    , type: "post"
                    , data: {}
                    , success: function (datas) {
                        if (datas.data != null) {
                            $.each(datas.data, function (index, item) {
                                $('#cate').append(new Option(item.cate, item.cate));// 下拉菜单里添加元素
                            });
                            layui.form.render("select");
                        }
                    }
                    , error: function () {
                        alert("查询类型失败！！！")
                    }
                });
            });


            //监听提交
            form.on('submit(add)', function (data) {
                console.log($('#bTitle').val(),$('#author').val(),$('#introduce').val(),$('#cate option:selected').val(),checkerbTitle)
                if ($('#bTitle').val() != null &&
                    $('#author').val() != null &&
                    $('#introduce').val() != null &&
                    $('#cate option:selected').val() != null
                    && checkerbTitle == 1) {
                    $('#addBtn').addClass("layui-btn-disabled").attr("disabled", false);
                    $.ajax({
                        url: "http://127.0.0.1:8001/after/book/addOne"
                        , type: "post"
                        , contentType: 'application/json;charset=UTF-8'
                        , data: JSON.stringify(data.field)
                        , success: function (datas) {
                            if (datas.data != null) {
                                layer.alert("添加成功", {
                                        icon: 6
                                    },
                                    function () {
                                        // 获取父窗口
                                        window.parent.location.reload();
                                        // 获得frame索引
                                        var index = parent.layer.getFrameIndex(window.name);
                                        //关闭当前frame
                                        parent.layer.close(index);
                                    });
                                return false;
                            }
                        }
                        , error: function () {
                            alert("添加失败！！！")
                        }
                    });
                } else {
                    layer.msg('请更正书籍信息', { time: 2000 });
                }

            });

        });
    </script>

</body>

</html>